/* eslint-disable no-undef */
import { SearchBar, Swiper, Toast, Card, Grid } from "antd-mobile";
import { HeartFill, MessageFill, EyeFill } from "antd-mobile-icons";
import { useEffect, useState } from "react";
import { newsAPI } from "../services/home";
import { dalImg } from "../utils/tools";
function Home() {
  const onClick = () => {
    Toast.show("点击了卡片");
  };
  /* lunbo */
  const imgs = [
    "https://img2.baidu.com/it/u=3274092380,359155126&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=544",
    "https://img2.baidu.com/it/u=2447193639,1461977585&fm=253&fmt=auto&app=138&f=JPEG?w=994&h=500",
    "https://img2.baidu.com/it/u=3039902820,3725345669&fm=253&fmt=auto&app=138&f=JPEG?w=1263&h=500",
    "https://img1.baidu.com/it/u=566198139,3882129457&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=500",
  ];
  const items = imgs.map((img, index) => (
    <Swiper.Item key={index}>
      <div
        style={{ height: "150px" }}
        onClick={() => {
          /* Toast.show(`你点击了卡片 ${index + 1}`); */
        }}>
        <img src={img} />
      </div>
    </Swiper.Item>
  ));
  const [news, setNews] = useState([]);
  /* news */
  useEffect(() => {
    newsAPI().then((res) => {
      //console.log(res.data.list);
      setNews(res.data.list);
    });
  }, []);
  return (
    <div className="homecontent">
      <div
        className="homehead"
        style={{
          height: "140px",
        }}>
        <div
          className="homezhanwei"
          style={{ height: "40px" }}></div>
        <SearchBar
          className="homesearch"
          style={{
            width: "80vw",
            "--height": "45px",
            "--border-radius": "100px",
            margin: "0 auto",
            borderRadius: "50px",
            "--padding-left": "20px",
          }}
          placeholder="皮肤科"
        />
      </div>
      <div
        className="sange"
        style={{
          display: "flex",
          height: "120px",
        }}>
        <div
          className="san"
          style={{
            flex: "1",
            boxSizing: "border-box",
          }}>
          <div
            style={{
              marginLeft: "34px",
              marginTop: "5px",
            }}>
            <MessageFill
              fontSize={60}
              color="rgb(120, 164, 255)"
            />
          </div>
          <p
            style={{
              fontSize: "20px",
              textAlign: "center",
              fontWeight: "600",
            }}>
            快速问诊
          </p>
          <p
            style={{
              textAlign: "center",
              marginTop: "5px",
              color: "rgb(173, 182, 204)",
            }}>
            3分钟内医生接诊
          </p>
        </div>
        <div
          className="san"
          style={{
            flex: "1",
            boxSizing: "border-box",
          }}>
          <div
            style={{
              marginLeft: "34px",
              marginTop: "5px",
            }}>
            <EyeFill
              fontSize={60}
              color="rgb(120, 164, 255)"
            />
          </div>
          <p
            style={{
              fontSize: "20px",
              textAlign: "center",
              fontWeight: "600",
            }}>
            砖家问诊
          </p>
          <p
            style={{
              textAlign: "center",
              marginTop: "5px",
              color: "rgb(173, 182, 204)",
            }}>
            砖家实时在线服务
          </p>
        </div>
        <div
          className="san"
          style={{
            flex: "1",
            boxSizing: "border-box",
          }}>
          <div
            style={{
              marginLeft: "34px",
              marginTop: "5px",
            }}>
            <HeartFill
              fontSize={60}
              color="rgb(120, 164, 255)"
            />
          </div>
          <p
            style={{
              fontSize: "20px",
              textAlign: "center",
              fontWeight: "600",
            }}>
            问诊购药
          </p>
          <p
            style={{
              textAlign: "center",
              marginTop: "5px",
              color: "rgb(173, 182, 204)",
            }}>
            在线复诊 送药到家
          </p>
        </div>
      </div>
      {/* 去挂号 */}
      <div>
        <Card
          onClick={onClick}
          style={{
            backgroundColor: "rgb(230, 239, 255)",
            width: "90vw",
            margin: "10px auto",
            height: "50px",
          }}>
          <p
            style={{
              fontSize: "20px",
              fontWeight: "600",
              marginLeft: "20px",
            }}>
            去挂号
            <span
              style={{
                fontSize: "15px",
                fontWeight: "400",
                marginLeft: "6px",
                color: "rgb(127, 131, 143)",
              }}>
              / 由挂号网在线提供
            </span>
          </p>
        </Card>
      </div>
      {/* grid */}
      <Grid
        style={{
          height: "150px",
        }}
        columns={5}
        gap={10}>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(132, 206, 66)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              一病多问
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(87, 142, 254)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              问诊购药
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(132, 206, 66)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              阳康体检
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(87, 142, 254)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              健康商城
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(132, 206, 66)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              瑞宁得
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(87, 142, 254)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              会员专区
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(132, 206, 66)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              三甲医院
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(87, 142, 254)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              专病专科
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(132, 206, 66)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              问诊优惠
            </p>
          </div>
        </Grid.Item>
        <Grid.Item>
          <div
            style={{
              textAlign: "center",
            }}>
            <HeartFill
              fontSize={25}
              color="rgb(87, 142, 254)"
            />
            <p
              style={{
                marginTop: "8px",
              }}>
              心理专区
            </p>
          </div>
        </Grid.Item>
      </Grid>
      {/* 轮播 */}
      <Swiper
        autoplay
        autoplayInterval="1500"
        loop>
        {items}
      </Swiper>
      <div
        style={{
          fontSize: "25px",
          fontWeight: "600",
          marginTop: "20px",
          marginLeft: "20px",
          marginBottom: "20px",
        }}>
        精选内容
      </div>
      {/* 文章 */}
      <Card
        style={{
          width: "90vw",
          margin: "0 auto",
        }}>
        {news.map((item) => (
          <div
            className="homenews"
            style={{
              marginBottom: "20px",
            }}
            key={item.id}>
            <img
              className="newsimg"
              style={{
                border: "1px solid #cecece",
              }}
              src={dalImg(item.image)}
            />
            <div
              className="newsname"
              style={{
                fontSize: "23px",
                fontWeight: "600",
                width: "200px",
                overflow: "hidden",
                marginTop: "5px",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}>
              {item.desc}
            </div>
            <div
              className="wyjk"
              style={{
                fontSize: "16px",
                marginTop: "50px",
                color: "rgb(186, 173, 179)",
              }}>
              {item.name}
            </div>
          </div>
        ))}
      </Card>
    </div>
  );
}

export default Home;
